import { Input, Select, DatePicker, Radio, InputNumber } from "antd"
import ProvinceCity from "../ProvinceCity";
import DefaultTree from "../DefaultTree";
import PlayWithSelect from '../playWithSelect/index'
import { memo } from "react";
const Option = Select.Option;
const { RangePicker } = DatePicker;
//自定义输入类型type
interface InputTypeProps extends listItem {
    onChange?: (value: any) => void
    value?: any
}
const InputType = (props: InputTypeProps) => {
    return (
        <>
            {/* 输入框 */}
            {
                props.type === 'input' ?
                    <Input value={props.value} disabled={props.disabled} onChange={props.onChange} placeholder={props.placeholder || '请输入' + props.label} maxLength={props.maxLength} />
                    : null
            }
            {/* 陪玩选择框 */}

            {
                props.type == 'playWithSelect' ?
                    <PlayWithSelect value={props.value} onChange={props.onChange} />
                    : null
            }
            {/* 百分比输入框 */}
            {
                props.type === 'inputNumber' ?
                    <InputNumber
                        max={props.max}
                        min={props.min}
                        parser={props.parser}
                        formatter={props.formatter}
                        value={props.value}
                        disabled={props.disabled}
                        onChange={props.onChange}
                        placeholder={props.placeholder || '请输入' + props.label}
                        maxLength={props.maxLength} /> :
                    null
            }
            {/* 输入多列框 */}
            {
                props.type === 'inputArea' ?
                    <Input.TextArea value={props.value} disabled={props.disabled} onChange={props.onChange} placeholder={props.placeholder || '请输入' + props.label} maxLength={props.maxLength} /> : null
            }
            {/* 搜索框 */}
            {
                props.type === 'select' ?
                    <Select mode={props.mode} filterOption={props.filterOption} disabled={props.disabled} value={props.value} onChange={props.onChange} placeholder={props.placeholder || '请选择' + props.label} >
                        {
                            props.options && props.options.map((item, index) => {
                                return <Option value={item.value} key={index}>{item.label}</Option>
                            })
                        }
                    </Select> : null
            }
            {/* 日期选择器 */}
            {
                props.type === 'datePicker' ?
                    <DatePicker disabled={props.disabled}
                        value={props.value}
                        onChange={props.onChange}
                        placeholder={props.placeholder}
                        style={{ width: "100%" }} /> : null
            }
            {/* 时间组件 */}
            {
                props.type === 'rangePicker' ?
                    <RangePicker
                        disabledDate={props.disabledDate}
                        disabled={props.disabled}
                        value={props.value}
                        onChange={props.onChange}
                        placeholder={[props.placeholder || '开始时间', props.placeholder || '结束时间']}
                        style={{ width: "100%" }}
                        format="YYYY-MM-DD" /> : null
            }

            {/* 单选组件 */}
            {
                props.type === 'radio' ?
                    <Radio.Group
                        disabled={props.disabled}
                        value={props.value}
                        onChange={props.onChange}
                        style={{ width: "100%" }}
                        options={props.options}
                    /> : null
            }
            {/* 省市组件 */}
            {
                props.type === 'provinceCity' ?
                    <ProvinceCity
                        value={props.value}
                        onChange={props.onChange}
                        placeholder={props.placeholder || '请选择' + props.label}
                        disabled={props.disabled} />
                    : null
            }
            {/* 树形组件 */}
            {
                props.type === 'tree' ?
                    <DefaultTree
                        disabled={props.disabled}
                        value={props.value}
                        onChange={props.onChange}
                        treeData={props.treeData} /> : null
            }
        </>
    )
}

export default memo(InputType)